<!-- 19 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="ChangeMachinePrType"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
        <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select v-model:value="queryForm.shopId" class="select-width" :placeholder="$t('common_pleaseSelect')">
            <a-select-option value="ARRAY">ARRAY</a-select-option>
            <a-select-option value="CF">CF</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_eqpId')" name="eqpId">
          <a-select v-model:value="queryForm.eqpId" class="select-width" allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_positionGroup')" name="positionGroup">
          <a-select v-model:value="queryForm.positionGroup" class="select-width" allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.positionGroup" :value="item.positionGroup">
            {{item.positionGroup}}
            </a-select-option>
          </a-select>
        </a-form-item>
    </t-query-form>
    <div class="page-wrap-main">
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_allPhotoLineList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <div class="page-wrap-main-table">
        <t-table
          :data="list.tableData"
          max-height="100%"
          :loading="searchBtnLoading"
          @radio-change="handleCheckChange"
        >
          <t-column type="radio" width="50"></t-column>
          <t-column field="eqpId" :title="$t('T9_eqpId')" />
          <t-column field="positionGroup" :title="$t('T9_positionGroup')" />
          <t-column field="slot" :title="$t('T9_slot')" />
          <t-column field="prType" :title="$t('T9_prType')" />
          <t-column field="desc" :title="$t('T9_desc')" />
          <t-column field="prLineState" :title="$t('T9_prLineState')" />
          <t-column field="materialLocationUsed" :title="$t('T9_materialLocationUsed')" />
          <t-column field="lastEventName" :title="$t('T9_lastUserName')" />
          <t-column field="eventTime" :title="$t('T9_eventTime')" />
          <t-column field="eventComment" :title="$t('T9_eventComment')" />
          <t-column field="needTurnFlag" :title="$t('T9_needTurnFlag')" />
        </t-table>
      </div>
      <div class='data-form page-wrap-main-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_newPrType')" name="newPrType">
            <a-select v-model:value="dataForm.newPrType" allow-clear class="select-width" @change="handleNewPrTypeChange">
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_desc')" name="desc">
            <a-input v-model:value="dataForm.desc" :title="dataForm.desc" :disabled="true"  style="width:260px"/>
          </a-form-item>
          <a-form-item name="needTurnFlag">
            <a-checkbox :disabled="needTurnFlagDisable" v-model:checked="dataForm.needTurnFlag">{{$t('T9_needturnflag')}}</a-checkbox>
          </a-form-item>
          <a-form-item :label="$t('T9_comment')" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button type="primary" :loading="confirmBtnLoading" @click="showConfirm">{{ $t('t9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'ChangeMachinePrType',
    components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        needTurnFlagDisable: false,
        confirmBtnLoading: false,
        visible: false,
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        queryForm: {
          shopId: 'ARRAY',
          positionGroup: undefined,
          eqpId: undefined
        },
        options: {
          positionGroupList: [],
          newPrTypeList: [],
          eqpIdList: []
        },
        dataForm: {
          newPrType: undefined,
          desc: '',
          needTurnFlag: false,
          eventUser: '',
          eventComment: '',
          prType: '',
          slot: '',
          positionGroup: '',
          eqpId: ''
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          newPrType: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          eventComment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    computed: {},
    created() {
      this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '80024' } }])
      this.getNewPrType(this.queryForm.shopId)
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.queryForm.eqpId = undefined
          this.queryForm.positionGroup = undefined
          this.dataForm.newPrType = undefined
          this.options.eqpIdList = []
          this.options.positionGroupList = []
          this.options.newPrTypeList = []
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80024' } }])
          this.getNewPrType(shopId)
        }
      },
      'queryForm.eqpId': {
        handler(eqpId) {
          this.queryForm.positionGroup = undefined
          this.options.positionGroupList = []
          this.getPositionGroup(this.queryForm.shopId, eqpId)
        }
      },
      'dataForm.newPrType': {
        handler(v) {
          if (!v) {
            this.dataForm.desc = ''
          }
        }
      }
    },
    methods: {
      handleCheckChange({ row }) {
        if (row.positionGroup === '2L' || row.positionGroup === '2R') {
          this.dataForm.needTurnFlag = true
          this.needTurnFlagDisable = true
        } else {
          this.needTurnFlagDisable = false
          this.dataForm.needTurnFlag = false
        }
        this.dataForm.slot = row.slot
        this.dataForm.prType = row.prType
        this.dataForm.positionGroup = row.positionGroup
        this.dataForm.eqpId = row.eqpId
      },
      getNewPrType(shopId) {
        if (shopId) {
          const params = {
            dtoName: 'PrTypeDTO',
            version: '80001',
            queryId: 'GetConsumableSpecList',
            consumableType: 'PR',
            menuName: 'changeMachinePrType',
            usage: 'getNewPrType',
            shopId
          }
          api
            .getList(params)
            .then((res) => {
              this.options.newPrTypeList = res || []
            })
            .catch((error) => {
              console.error(error)
            })
        }
      },
      getPositionGroup(shopId, eqpId) {
        if (shopId && eqpId) {
          const params = {
            dtoName: 'PositionGroupDTO',
            version: '80037',
            queryId: 'GetMachineList',
            menuName: 'changeMachinePrType',
            usage: 'getPositionGroup',
            shopId,
            eqpId
          }
          api
            .getList(params)
            .then((res) => {
              this.options.positionGroupList = res || []
            })
            .catch((error) => {
              console.error(error)
            })
        }
      },
      handleNewPrTypeChange(value, o) {
        this.dataForm.desc = o.prdesc
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const basicParams = {
              queryId: 'GetMachinePRTypeList',
              version: '80007',
              dtoName: 'PrTypeListDTO',
              menuName: 'changeMachinePrType',
              usage: 'getPrTypeList'
            }
            api
              .getList({ ...this.queryForm, ...basicParams })
              .then((res) => {
                this.searchBtnLoading = false
                this.list.tableData = res || []
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      showConfirm() {
        this.$refs.dataForm.validate().then(() => {
          this.visible = true
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleOk() {
        this.visible = false
        this.confirmBtnLoading = true
        this.dataForm.eventUser = this.$store.state.user.uid
        const basicParams = {
          menuName: 'changeMachinePrType',
          usage: 'confirm'
        }
        api
          .confirm({ ...this.dataForm, ...basicParams })
          .then(() => {
            this.confirmBtnLoading = false
            this.$refs.dataForm.resetFields()
            this.handleSearch()
          })
          .catch((error) => {
            this.confirmBtnLoading = false
            console.error(error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
